<template>
  <!-- 评价指标管理 -->
  <baseslot :show-search-box="false">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="91"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:table-box>
      评价指标管理
      <el-tree
        ref="tree"
        :props="treerule"
        :data="treeData"
        highlight-current
        show-checkbox
        check-strictly
        node-key="evaluationIndexId"
        default-expand-all
        @node-click="handleEdit"
        @check-change="handleSelectionChange"
      >
        <span slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>({{ data.evaluationIndexScore }}分)</span>
        </span>
      </el-tree>
    </template>
    <template v-slot:dialog>
      <el-dialog
        :title="'评价添加指标' +' '+ addlist.parentName "
        :visible.sync="isshowaddview"
        width="30%"
      >
        <div class="input-line">
          <div class="input-line-lab">指标名称:</div>
          <el-input v-model="addlist.evaluationIndexName" class="input-line-input" />
        </div>
        <div class="input-line">
          <div class="input-line-lab">指标分数:</div>
          <el-input v-model="addlist.evaluationIndexScore" class="input-line-input" />
        </div>
        <div class="input-line">
          <div class="input-line-lab">备注:</div>
          <el-input v-model="addlist.remark" class="input-line-input" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel">取 消</el-button>
          <el-button class="zh-button-two" @click="save">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="评价修改指标"
        :visible.sync="isshoweditview"
        width="30%"
      >
        <div class="input-line">
          <div class="input-line-lab">指标名称:</div>
          <el-input v-model="editlist.evaluationIndexName" class="input-line-input" />
        </div>
        <div class="input-line">
          <div class="input-line-lab">指标分数:</div>
          <el-input v-model="editlist.evaluationIndexScore" class="input-line-input" />
        </div>
        <div class="input-line">
          <div class="input-line-lab">备注:</div>
          <el-input v-model="editlist.remark" class="input-line-input" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel">取 消</el-button>
          <el-button class="zh-button-two" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </baseslot>
</template>

<script>
import nowpage from "@/api/trace-source-web/agr-safety-evaluation/evaluation-indicator/index"
import baseslot from "@/components/BaseMainSlot/newBaseMainSlot.vue"
import ActionBar from "@/components/ActionBar";
import { mymixin } from "@/utils/mixin"
export default {
  name: "EvaluationIndicator",
  components: { baseslot, ActionBar },
  mixins: [mymixin],
  data() {
    return {
      addlist: {
        parentId: 0,
        parentName: "",
        evaluationIndexName: "",
        evaluationIndexScore: "",
        remark: ""
      },
      selectlist: [],
      editlist: {
        // evaluationIndexId: "",
        // evaluationIndexName: "",
        // evaluationIndexScore: "",
        // parentId: "",
        // remark: ""
      },
      isshoweditview: false,
      // 是否展示添加弹框1
      isshowaddview: false,
      treerule: {
        children: "child",
        label: "evaluationIndexName"
      },
      nowChanceStau: '',
      treeData: [
        // {
        //   evaluationIndexName: "基本信息",
        //   evaluationIndexScore: 120,
        //   evaluationIndexId: 1,
        //   child: [
        //     { evaluationIndexName: "主体信息", newevaluationName: "主体信息（30分）", evaluationIndexId: 2, evaluationIndexScore: 30 }
        //   ]
        // }
      ]
    }
  },
  watch: {
    // nowChanceStau(newval) {
    //   if (newval === 'add') {
    //     this.dataaddVisible = true;
    //     this.addlist.evaluationIndexName = "";
    //     this.addlist.evaluationIndexScore = "";
    //     this.addlist.remark = "";
    //   }
    //   if (newval === 'edit') {
    //     this.dataaddVisibletwo = true
    //   }
    // }
  },
  mounted() {
    this.gettreelist()
  },
  methods: {
    // 获取树状信息
    gettreelist() {
      this.treeData = []
      nowpage.gettreelist().then(
        res => {
          let data = res.data
          if (data.length > 0) {
            this.treeData = data
          }
        }
      )
    },
    // 选中某个节点
    handleEdit(row) {
      // TODO 点击行元素后 edit
      this.editlist = row;
      // console.log(row)
      if (row.parentId === 0) {
        this.addlist.parentId = row.evaluationIndexId
        this.addlist.parentName = row.evaluationIndexName
        this.addActive = true
      } else {
        this.addActive = false
        this.cancelActive = true
      }
      this.editActive = true
      this.cancelActive = true
      // this.addlist.parentId = row.evaluationIndexId
      // this.addlist.parentName = row.evaluationIndexName
      // console.log(this.editlist)
      this.$refs.formData.resetFields();
    },
    // 选择某个借鉴
    handleSelectionChange() {
      let list = this.$refs.tree.getCheckedKeys();
      this.selectlist = list
      if (list.length > 0) {
        this.delActive = true
        this.cancelActive = true
      }
      // console.log(list)
    },
    // 删除时触发方法
    delmessage() {
      nowpage.deltreelist(this.selectlist).then(
        res => {
          if (res.code === 1) {
            this.selectlist = []
            this.$message.success("删除成功！")
            this.resetActionBar()
            this.gettreelist()
          } else {
            this.$message.warning("删除失败！")
          }
        }
      )
    },
    add() {
      this.nowChanceStau = 'add'
      this.isshowaddview = true;
      this.addlist.evaluationIndexName = "";
      this.addlist.evaluationIndexScore = "";
      this.addlist.remark = "";
      this.canInput = true;
      this.addActive = false;
      this.delActive = false;
      this.saveActive = true;
      this.cancelActive = true;
      this.editActive = false;
    },
    edit() {
      this.nowChanceStau = 'edit'
      this.isshoweditview = true;
      this.canInput = true;
      this.addActive = false;
      this.delActive = false;
      this.saveActive = true;
      this.cancelActive = true;
      this.editActive = false;
    },
    cancel() {
      // this.nowChanceStau = 'cancel'
      this.addlist = {
        parentId: 0,
        parentName: "",
        evaluationIndexName: "",
        evaluationIndexScore: "",
        remark: ""
      }
      let that = this
      that.$nextTick(
        () => {
          that.$refs.tree.setCheckedNodes([])
        }
      )
      this.isshoweditview = false;
      this.isshowaddview = false;
      this.canInput = false;
      this.addActive = true;
      this.delActive = false;
      this.saveActive = false;
      this.cancelActive = false;
      this.editActive = false;
    },
    save() {
      // console.log(this.nowChanceStau)
      if (this.nowChanceStau === 'add') {
        nowpage.addtreelist(this.addlist).then(
          res => {
            if (res.code === 1) {
              this.$message.success("添加成功！")
              this.isshowaddview = false;
              this.resetActionBar()
              this.gettreelist()
            } else {
              this.$message.warning("添加失败！")
            }
          }
        )
      }
      if (this.nowChanceStau === 'edit') {
        nowpage.edittreelist(this.editlist).then(
          res => {
            if (res.code === 1) {
              this.$message.success("修改成功！")
              this.isshoweditview = false;
              this.resetActionBar()
              this.gettreelist()
              // this.isshoweditview = false;
            } else {
              this.$message.warning("修改失败！")
            }
          }
        )
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tree {
    height: 98%;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px !important;
    }
  }
}
// 表格hover及选中样式
::v-deep .el-table tr:hover,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
::v-deep .el-table__body tr.current-row > td {
  background-color: #15a0ca00 !important;
}
</style>
